<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import router from "@/router";
import { listPlatforms, LabPlatformVO } from "@/api/LabPlatformApi";
import { Experiment, addInstance } from "@/api/LabExperimentApi";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object as () => Experiment,
    default: () => {
      return {};
    }
  },
  configId: {
    type: String
  },
  ext: {
    type: Object
  }
});

const ruleFormRef = ref<FormInstance>();
const allPlatforms = ref<Array<LabPlatformVO>>([]);

const formVisible = ref(false);
const formData = ref(props.data);

const emit = defineEmits(["update:visible", "add-item"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  console.log("formEL", formEl);
  await formEl.validate(async valid => {
    if (valid) {
      formData.value = {
        ...formData.value,
        expPlatformId: props.configId,
        ext: JSON.stringify(props.ext)
      };
      const ret = await addInstance(formData.value);
      if (ret.errorCode !== 0) {
        message(ret.message, { type: "error" });
      } else {
        //跳转至实验实例监控
        router.push({
          name: "Monitor",
          query: {
            configId: ret.data.expPlatformId,
            id: ret.data.id,
            expFlag: 1
          }
        });
        localStorage.setItem(
          "defaultMonitorQuery",
          JSON.stringify({
            configId: ret.data.expPlatformId,
            id: ret.data.id,
            expFlag: 1
          })
        );

        message("提交成功", { type: "success" });
        resetForm(formEl);
        formVisible.value = false;
        // emit("add-item");
      }
    }
  });
};
const getLabPlatformData = async () => {
  const result = await listPlatforms();
  allPlatforms.value = result.data;
};

onMounted(() => {
  getLabPlatformData();
});

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  resetForm(ruleFormRef.value);
};

watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

watch(
  () => props.configId,
  val => {
    formData.value.expPlatformId = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  expPlatformId: [
    { required: true, message: "请选择实验配置", trigger: "blur" }
  ]
  // time: [{ required: true, message: "未设置实验总时长", trigger: "blur" }]
};
</script>

<template>
  <el-dialog
    v-model="formVisible"
    title="创建实验实例"
    :width="680"
    :before-close="closeDialog"
  >
    <!-- {{ props }} -->

    <!-- <span style="color: brown">{{ formData }}</span> -->
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="formData.name"
          :style="{ width: '480px' }"
          placeholder="请输入名称"
        />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formData.desc"
          type="textarea"
          :style="{ width: '480px' }"
          placeholder="请输入描述"
        />
      </el-form-item>
      <!-- <el-form-item label="选择配置" prop="expPlatformId">
        <el-select
          v-model="formData.expPlatformId"
          placeholder="请选择实验配置"
        >
          <el-option
            v-for="item in allPlatforms"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="是否可修改参数" prop="canChangeParam">
        <el-switch
          v-model="formData.canChangeParam"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <el-form-item label="选择时间" prop="time">
        <el-row>
          <el-input-number
            :max="30"
            :min="0"
            v-model="formData.days"
            size="small"
            style="width: 80px"
            controls-position="right"
          /><span style="margin-left: 5px; margin-right: 10px">天</span>
          <el-input-number
            :max="30"
            :min="0"
            v-model="formData.hours"
            size="small"
            style="width: 80px"
            controls-position="right"
          /><span style="margin-left: 5px; margin-right: 10px">小时</span>
          <el-input-number
            :max="30"
            :min="0"
            v-model="formData.minutes"
            size="small"
            style="width: 80px"
            controls-position="right"
          /><span style="margin-left: 5px; margin-right: 10px">分钟</span>
          <el-input-number
            :max="30"
            :min="0"
            v-model="formData.seconds"
            size="small"
            style="width: 80px"
            controls-position="right"
          /><span style="margin-left: 5px; margin-right: 10px">秒</span>
        </el-row>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
